<template>
  <div class='createPost-container'>
    <el-form class="form-container" :model="temp" :rules="rules" ref="form" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
      <div class='createPost-main-container'>
        <el-form-item label="名称">
          <el-input v-model="temp.descr"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="temp.longDescr"></el-input>
        </el-form-item>
        <el-form-item label="种类">
          <el-select v-model="restKindsSel" multiple>
            <el-option
              v-for="item in restKinds"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格">
          <el-input-number :min="0" v-model="temp.price"></el-input-number>
        </el-form-item>
        <el-form-item label="包装费">
          <el-input-number :min="0" v-model="temp.package"></el-input-number>
        </el-form-item>
        
        <el-form-item label="午餐售卖">
          <el-radio v-model="temp.ifLunch" label="1">是</el-radio>
          <el-radio v-model="temp.ifLunch" label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="晚餐售卖">
          <el-radio v-model="temp.ifDinner" label="1">是</el-radio>
          <el-radio v-model="temp.ifDinner" label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="temp.enable">
            <el-option label="生效" value="1"></el-option>
            <el-option label="无效" value="0"></el-option>
          </el-select>
        </el-form-item>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="create">确 定</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { create } from '@/api/food';
import { restKindsSel } from '@/api/rest';

export default {
  name: 'x',
  data() {
    return {
      restKinds: [],
      restKindsSel:[],
      rests: [],
      restaurant_id: '',
      ifOptions: [{
          value: '0',
          label: '否'
        }, {
          value: '1',
          label: '是'
        }
      ],
      temp : {
        restaurantId : '',
        descr: '',
        longDescr: '',
        price: 0,
        package: 0,
        ifDinner: '',
        ifLunch: '',
        kindId: '',
        enable: '1'
      },
      rules: {
      }
    };
  },
  created() {
    if (this.$route.query.restaurant_id) {
      this.restaurant_id = this.$route.query.restaurant_id;
    }else{
      this.restaurant_id = Math.ceil(Math.random()*10);
      this.$msgbox({
          title: '提示',
          message: '添加食品需要选择一个商铺，先去就去选择商铺吗？',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              this.$router.push('/shopList');
              done();
            } else {
              this.$message({
                type: 'info',
                message: '取消'
            });
                done();
            }
          }
        })
    }
    this.getRestKinds();
  },
  filters: {
   
  },
  methods: {
    async getRestKinds(){
      try{
        const result = await restKindsSel(this.restaurant_id);
        if(result.data.code=1){
          this.restKinds=result.data.items
        }else{
          console.log(result)
        }
      }catch(err){
        console.log(err)
      }
    },
    create() {
      // validate
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          const kindDescrArray=[]
          for(const v of this.restKindsSel){
            for(const y of this.restKinds){
              if(v===y.value){
                kindDescrArray.push(y.label)
              }
            }
          }
          this.temp.kindDescr = kindDescrArray.join(',')
          this.temp.kindId = this.restKindsSel.join(',')
          this.temp.restaurantId = this.restaurant_id
          const res = await create(this.temp)
          // debugger
          if(res.data.code==1){
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
            resetTemp()
          }else{
            this.$notify({
              title: '失败',
              message: '创建失败',
              type: 'error',
              duration: 2000
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
        this.dialogFormVisible = false
      })
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        descr: ''
      }
    }
  }
};
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .title-prompt{
    position: absolute;
    right: 0px;
    font-size: 12px;
    top:10px;
    color:#ff4949;
  }
  .createPost-container {
    position: relative;
    .createPost-main-container {
      padding: 40px 45px 20px 50px;
      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;
        .postInfo-container-item {
          float: left;
        }
      }
      .editor-container {
        min-height: 500px;
        margin: 0 0 30px;
        .editor-upload-btn-container {
            text-align: right;
            margin-right: 10px;
            .editor-upload-btn {
                display: inline-block;
            }
        }
      }
    }
    .word-counter {
      width: 40px;
      position: absolute;
      right: -10px;
      top: 0px;
    }
  }
</style>